<template>
  <div class="div-container">
    <div class="tem-class" ref="historyChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";

export default {
    props:['siloResult'],
    data(){
        return{
            // series:undefined,
            option:undefined,
            historyChart:undefined,
            // thisSiloResult:undefined,
        }
    },
    watch:{
        // siloResult:{
        //     deep:true,
        //     handler(newValue){
        //         this.initChart();
        //     }
        // }
    },
    mounted(){
        this.initChart();
    },
    beforeDestroy(){
        if(this.historyChart){
            this.historyChart.dispose();
            this.historyChart = null;
        }
    },
    methods:{
        initChart(){
            // console.log("??????",this.siloResult)
            // if(!this.siloResult) return;
            // var dateAxis = [];
            // var minAxis = [];
            // var levAxis = [];
            // var maxAxis = [];
            // this.siloResult.forEach(item => {
            //     dateAxis.push(moment(item.createTime).format("YYYY-MM-DD HH:mm:ss").substring(11));
            //     minAxis.push(item.linerMin)
            //     levAxis.push(item.linerLev)
            //     maxAxis.push(item.linerMax)
            // });
            var highlight = '#03b7c9';

            var demoData = [{
                    name: '温度',
                    value: 22,
                    unit: '℃',
                    pos: ['25%', '40%'],
                    range: [-40, 100],
                    YS: [
                        [0.4, '#119eff'],
                        [0.5, '#30da74'],
                        [1, '#f3390d']
                    ]
                },
                {
                    name: '湿度',
                    value: 90,
                    unit: '%',
                    pos: ['75%', '40%'],
                    range: [0, 100],
                    splitNum: 10,
                    YS: [
                        [0.3, '#f3390d'],
                        [0.8, '#30da74'],
                        [1, '#119eff']
                    ]
                }
            ];

            if(this.historyChart){
                this.option.series[0].data = 20;
                this.option.series[1].data = 20;
            }else{
                this.option = {
                    backgroundColor: 'rgba(0,0,0,0)',
                    series: (function() {
                        var result = [];

                        demoData.forEach(function(item) {
                            result.push(
                                // 外围刻度
                                {
                                    type: 'gauge',
                                    center: item.pos,
                                    radius: '50%', // 1行2个
                                    splitNumber: item.splitNum || 10,
                                    min: item.range[0],
                                    max: item.range[1],
                                    startAngle: 225,
                                    endAngle: -45,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            width: 2,
                                            shadowBlur: 0,
                                            color: [
                                                [1, highlight]
                                            ]
                                        }
                                    },
                                    axisTick: {
                                        show: true,
                                        lineStyle: {
                                            color: highlight,
                                            width: 1
                                        },
                                        length: -5,
                                        splitNumber: 10
                                    },
                                    splitLine: {
                                        show: true,
                                        length: -10,
                                        lineStyle: {
                                            color: highlight,
                                        }
                                    },
                                    axisLabel: {
                                        distance: -18,
                                        textStyle: {
                                            color: highlight,
                                            fontSize: '10',

                                        }
                                    },
                                    pointer: {
                                        show: 0
                                    },
                                    detail: {
                                        show: 0
                                    }
                                }, {
                                    name: '速度',
                                    type: 'gauge',
                                    center: item.pos,
                                    splitNumber: item.splitNum || 10,
                                    min: item.range[0],
                                    max: item.range[1],
                                    radius: '45%',
                                    axisLine: { // 坐标轴线
                                        show: false,
                                        lineStyle: { // 属性lineStyle控制线条样式
                                            color: item.YS,
                                            shadowColor: "#ccc",
                                            shadowBlur: 25,
                                            width: 0
                                        }
                                    },
                                    axisLabel: {
                                        show: false
                                    },
                                    axisTick: { // 坐标轴小标记
                                        // show: false,
                                        length: 20, // 属性length控制线长
                                        lineStyle: { // 属性lineStyle控制线条样式
                                            color: 'auto',
                                            width: 2
                                        }
                                    },
                                    splitLine: { // 分隔线
                                        show: false,
                                        length: 20, // 属性length控制线长
                                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    title: {
                                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            fontWeight: 'bolder',
                                            fontSize: 20,
                                            fontStyle: 'italic'
                                        }
                                    },
                                    detail: {
                                        show: true,
                                        offsetCenter: [0, '100%'],
                                        textStyle: {
                                            fontSize: 25,
                                            color:'#4be4de',
                                        },
                                        formatter: [
                                            '{value} ' + (item.unit || ''),
                                            '{name|' + item.name + '}'
                                        ].join('\n'),
                                        rich: {
                                            name: {
                                                fontSize: 16,
                                                lineHeight: 30,
                                                color: '#4be4de'
                                            }
                                        }
                                    },
                                    data: [{
                                        value: item.value
                                    }],
                                    pointer: {
                                        width: 5
                                    }
                                },
                                // 内侧指针、数值显示
                                {
                                    name: item.name,
                                    type: 'gauge',
                                    center: item.pos,
                                    radius: '40%',
                                    startAngle: 225,
                                    endAngle: -45,
                                    min: item.range[0],
                                    max: item.range[1],
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            width: 16,
                                            color: [
                                                [1, 'rgba(75,228,255,.1)']
                                            ]
                                        }
                                    },
                                    axisTick: {
                                        show: 0,
                                    },
                                    splitLine: {
                                        show: 0,
                                    },
                                    axisLabel: {
                                        show: 0
                                    },
                                    pointer: {
                                        show: true,
                                        length: '90%',
                                        width: 3,
                                    },
                                    itemStyle: { //表盘指针的颜色
                                        color: 'rgba(255, 153, 0, 0.31)',
                                        borderColor: '#ff9900',
                                        borderWidth: 1
                                    },
                                    detail: {
                                        show: false,
                                        offsetCenter: [0, '100%'],
                                        textStyle: {
                                            fontSize: 20,
                                            color: '#00eff2'
                                        },
                                        formatter: [
                                            '{value} ' + (item.unit || ''),
                                            '{name|' + item.name + '}'
                                        ].join('\n'),
                                        rich: {
                                            name: {
                                                fontSize: 14,
                                                lineHeight: 30,
                                                color: '#00eff2'
                                            }
                                        }
                                    },

                                    data: [{
                                        value: item.value
                                    }]
                                }
                            );
                        });
                        return result;
                    })()
                };
                this.historyChart = echarts.init(this.$refs.historyChart);
            }
            this.historyChart.setOption(this.option,true);
        },
        historyChartResize(){
            if(this.historyChart) {
                this.historyChart.resize()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .div-container{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .tem-class{
        width: 100%;
        height: 100%;
    }
</style>